
{% extends "common/vacation_base.html" %}

{% block title %}填写订单{% endblock %}

{% block css_ex %}
    <!-- build:css(.tmp) css/hotel/hotel_order_main.css -->
    <link rel="stylesheet" href="{{ url_for('static', filename='mobile/css/tripproduct/vacation_order.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='mobile/css/hotel/hotel_book.css') }}">
    <!-- endbuild -->
{% endblock %}

{% block app_header %}
    <script>
        {% if not is_breadtrip %}
        // System
        var breadtripBannerTitle = '{{ hotel_name|safe }}';
        var activityName = '{{ hotel_name|safe }}';
        // Display share button or not
        var shrFlag = 0;
        // Display back button or not
        var goBackFlag = true;
        // Display contact button or not
        var contactFlag = true;
        // Display confirm button or not
        var confirmFlag = false;
        {% else %}
        // System
        var breadtrip_banner_title = '{{ hotel_name|safe }}';
        var activity_name = '{{ hotel_name|safe }}';

        // Display share button or not
        var shr_flag = 0;
        var cnl_webview = 1;
        var disable_back = 1;
        {% endif %}
    </script>
{% endblock %}

{% block content %}
<section  ng-controller="orderController" ng-cloak>
    <!-- 搜索房型失败  -->
    <div id="popup-comfirm" class="popup popup-comfirm"  ng-if=" !data.product_id ">
        <p class="popup-mask"></p>
        <div class="popup-inner popup-comfirm-inner">
            <h4>暂无合适房型，请重新选择</h4>
            <a class="confirm-btn" ng-click="confirmEvent()">确定</a>
        </div>
    </div>
    <!-- 取消政策 -->
    <div id="popup-comfirm" class="popup popup-comfirm policy hide">
        <p class="popup-mask"></p>
        <div class="popup-inner popup-comfirm-inner">
            <h4><p ng-repeat="p in replace(data.cancellation_desc) track by $index">{[p]}</p></h4>
            <a class="confirm-btn" ng-click="confirmEvent()">确定</a>
        </div>
    </div>
    <section class="booking-form">
        <form id="form" name="orderForm" novalidate ng-submit="submitForm(orderForm.$valid)">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <input type="hidden" name="device_id" value="{{device_id}}">
            {% if user and user.id %}
            <input type="hidden" name="user_id" value="{{user.id}}">
            {% endif %}
            {% if plan_id %}
            <input type="hidden" name="plan_id" value="{{plan_id}}">
            {% endif %}
            <input type="hidden" name="mode" value="{{mode}}">
            <input type="hidden" name="hotel_id" value="{{hotel_id}}">
            <input type="hidden" name="hotel_name" value="{{hotel_name}}">
            <input type="hidden" name="hotel_country" value="{{hotel_country}}">
            <input type="hidden" name="hotel_city" value="{{hotel_city}}">


            <h3 class="booking-title"><i class="icon-order"></i>基本信息</h3>
            <table cellspacing="0" class="contact-table">
                <tr>
                    <td><label>入住时间</label></td>
                    <td>
                        <a ng-click="goHref('checkin_date')">
                            <input class="checkin" type="text" name="checkin_date" value="{{checkin_date}}" readonly="readonly">
                            <i class="icon icon-date"></i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td><label>退房时间</label></td>
                    <td>
                        <a ng-click="goHref('checkout_date')">
                            <i class="icon icon-date"></i>
                            <input class="checkout" type="text" name="checkout_date" value="{{checkout_date}}" readonly="readonly">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td><label>房间数量</label></td>
                    <td>
                        <!-- 不需post -->
                        <select ng-init="rooms_count = (getNumberArray(8) | filter:data.rooms_count:strict)[0]" ng-model="rooms_count" ng-options="o for o in getNumberArray(8)" ng-change="valid=false;changeRoom(rooms_count)" autocomplete ></select>

                        <i class="icon icon-down"></i>
                    </td>
                </tr>
            </table>
            <table cellspacing="0" class="contact-table">
                <tr>
                    <td>
                        <label>房型</label>
                    </td>
                    <td>
                        <p ng-click="goHref('type')">
                            <i class="icon icon-type"></i>
                            <input class="room_type" type="text" value="{[data.product_name]}" readonly="readonly" ng-module="data.product_name">
                            <input type="hidden" name="product_id" value="{[data.product_id]}" ng-module="data.product_id">
                            <input type="hidden" name="product_name" value="{[data.product_name]}" ng-module="data.product_name">
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>价格</label>
                    </td>
                    <td>
                        <p>
                            <span class="type-price">￥<b>{[price]}</b></span>
                        </p>
                    </td>
                </tr>
            </table>
            <p class="hotel-tip">此房间价格包含税费和服务费 ￥{[tax_and_fee]}</p>
            <div ng-repeat="i in data.rooms track by $index">
                <h3 class="booking-title room">房间{[ $index+1 ]} 联系人</h3>
                <input name="adultNum" value="{[i.adultNum]}" type="hidden">
                <input name="childAges" value="{[i.childAges]}" type="hidden">
                <table cellspacing="0" class="contact-table">
                    <tr>
                        <td>
                            <label>护照英文姓</label>
                        </td>
                        <td>
                            <p>
                                <input name="lastName_{[$index]}" type="text" value="{[i.lastName]}" ng-keydown="onKeyDown($event)" required ng-model="i.lastName" autocomplete="off" placeholder="姓（拼音）" ng-blur="blur()" ng-focus="focus()" ng-pattern="/^[A-Za-z]+$/">
                                <i class="icon-error" ng-show="valid && orderForm.lastName_{[$index]}.$invalid"></i>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>护照英文名</label>
                        </td>
                        <td>
                            <p>
                                <input name="firstName_{[$index]}" type="text" value="{[i.firstName]}" ng-keydown="onKeyDown($event)" required ng-model="i.firstName" autocomplete="off" placeholder="名（拼音）" ng-blur="blur()" ng-focus="focus()" ng-pattern="/^[A-Za-z]+$/">
                                <i class="icon-error" ng-show="valid && orderForm.firstName_{[$index]}.$invalid"></i>
                            </p>
                        </td>
                    </tr>
                    <tr ng-if="data.bed_types && data.bed_types.length > 0">
                        <td><label>床型</label></td>
                        <td >
                            <select ng-init="myOption =  (data.bed_types | filter  : i.bedTypeId)[0] || data.bed_types[0]" ng-model="myOption" ng-options="o.name for o in data.bed_types" ng-change="valid=false;"></select>
                            <input name="bedTypeId" value="{[myOption.id]}" type="hidden">
                            <i class="icon icon-down"></i>
                        </td>
                    </tr>
                    <input name="bedTypeId" type='hidden' value='' ng-if="data.bed_types.length < 1">
                </table>
            </div>
            <table cellspacing="0" class="contact-table">
                <tr>
                    <td>
                        <label>住客偏好</label>
                    </td>
                    <td>
                        <a ng-click="goHref('preference')">
                            <input class="customer_preferences" type="text" value="{[data.preferences]}" readonly="readonly">
                            <input name="customer_preferences" type="hidden" value="{[data.customer_preferences]}" ng-if="data.customer_preferences != '' || data.customer_preferences != 0 ">
                            <i class="icon icon-type"></i>
                        </a>
                    </td>
                </tr>
            </table>
            <div class="booking-agreement invoice">
                <input type="checkbox" ng-model="data.need_invoice" ng-change="valid=false;">
                <i class="icon-check"></i>
                <label>需要发票</label>
            </div>
            <table cellspacing="0" class="contact-table" ng-if="data.need_invoice">
                <tr>
                    <td>
                        <label>发票抬头</label>
                    </td>
                    <td>
                        <p>
                            <em class="textarea" contenteditable="true" autocomplete="off" placeholder="请输入发票抬头">{[data.invoice_title]}</em>
                            <input name="invoice_title" type="hidden" value="{[data.invoice_title]}" required autocomplete="off" ng-model="data.invoice_title">
                            <i class="icon-error" ng-show="valid && orderForm.invoice_title.$invalid"></i>
                        </p>
                    </td>
                </tr>
            </table>
            <h3 class="booking-title"><i class="icon-user"></i>联系方式</h3>
            <table cellspacing="0" class="contact-table">
                <tr>
                    <td><label>邮箱</label></td>
                    <td >
                        <p>
                            <input name="contact_email" type="email" value="{[data.contact_email]}" ng-keydown="onKeyDown($event)" required ng-model="data.contact_email" autocomplete="off" placeholder="请输入邮箱地址" ng-pattern="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/" ng-blur="blur()" ng-focus="focus()">
                            <i class="icon-error" ng-show="valid && orderForm.contact_email.$invalid"></i>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td><label>手机号</label></td>
                    <td >
                        <p>
                            <input name="contact_mobile" type="tel" value="{[data.contact_mobile]}" ng-keydown="onKeyDown($event)" required ng-model="data.contact_mobile" autocomplete="off" ng-pattern="/^1[0-9]{10}$|^86[0-9]{11}$|^852[0-9]{8}$|^853[0-9]{8}$|^886[0-9]{9}$/" placeholder="请输入手机号" ng-blur="blur()" ng-focus="focus()">
                            <i class="icon-error" ng-show="valid && orderForm.contact_mobile.$invalid"></i>
                        </p>
                    </td>
                </tr>
            </table>
            <div class="total-block" ng-if="data.mode == 1">
                <p>总价：</p>
                <p class="total-price">￥<span>{[total_price]}</span></p>
            </div>
            <div class="hotel-rule" ng-if="data.cancellation_desc.length > 0 && data.cancellation_desc[0] != ''">查看本产品的
                <a ng-click="checkPolicy()">取消政策</a>
                <p class="text-error hide"></p>
            </div>
            <ul class="hotel-bottom" ng-if="data.mode == 1">
                <li id="detail-btn" ng-click="goDetail(data.hotel_name, data.hotel_id)">详情</li>
                <li id="submit-btn" class=" {[ data.product_id ? '' : 'disabled']} "><input id="submit" value="完成" type="submit"></li>
            </ul>
            <ul class="hotel-bottom diff" style="width:101% !important;" ng-if="data.mode != 1">
                <li><p>总价：<span><em>¥</em>{[total_price]}</span></p></li>
                <li id="submit-btn" class=" {[ data.product_id ? '' : 'disabled']} "><input id="submit" value="结算" type="submit"></li>
            </ul>
        </form>
    </section>
</section>

{% endblock %}

{# 不加载swipe组件 #}
{% block js_swipe %}{% endblock %}

{# 不加载zepto touch组件 #}
{% block js_touch %}{% endblock %}

{% block js_ex %}
<script type="text/javascript">
    BT.context('deviceId', '{{device_id}}')
    BT.context('checkinDate', '{{checkin_date}}')
    BT.context('checkoutDate', '{{checkout_date}}')
    BT.context('mode', '{{mode}}')
    BT.context('hotelId', '{{hotel_id}}')
    var obj = {{data|safe}};
</script>
<!-- build:js js/hotel/hotel_order_main.js -->
<script src="{{ url_for('static', filename='mobile/js/common/lib/angular.min.js') }}"></script>
<script src="{{ url_for('static', filename='mobile/js/common/lib/moment.js') }}"></script>
<script src="{{ url_for('static', filename='mobile/js/hotel/hotel_book.js') }}"></script>
<!-- endbuild -->
{% endblock %}
